// 暗色主题样式
[data-theme="dark"] {
  // 重置页面基础样式
  color-scheme: dark;
  
  // 通用文字颜色
  h1, h2, h3, h4, h5, h6 {
    color: var(--el-text-color-primary);
  }
  
  p, span, div {
    color: var(--el-text-color-regular);
  }

  // Element Plus 组件暗色适配
  .el-card {
    background-color: var(--el-bg-color);
    border-color: var(--el-border-color);
    
    .el-card__header {
      background-color: var(--el-fill-color-light);
      border-color: var(--el-border-color);
      color: var(--el-text-color-primary);
    }
    
    .el-card__body {
      color: var(--el-text-color-regular);
    }
  }

  .el-table {
    background-color: var(--el-bg-color);
    color: var(--el-text-color-regular);
    
    th.el-table__cell {
      background-color: var(--el-fill-color);
      color: var(--el-text-color-primary);
      border-color: var(--el-border-color);
    }
    
    td.el-table__cell {
      border-color: var(--el-border-color);
    }
    
    tr {
      background-color: var(--el-bg-color);
      
      &:hover td {
        background-color: var(--el-fill-color-light);
      }
    }
    
    .el-table__empty-block {
      background-color: var(--el-bg-color);
    }
    
    .el-table__empty-text {
      color: var(--el-text-color-secondary);
    }
  }

  .el-pagination {
    .el-pagination__total,
    .el-pagination__jump {
      color: var(--el-text-color-regular);
    }
  }

  .el-menu {
    background-color: var(--theme-menu-bg);
    border-color: var(--el-border-color);
    
    .el-menu-item,
    .el-sub-menu__title {
      color: var(--theme-menu-text);
      
      &:hover {
        background-color: var(--theme-menu-hover-bg);
        color: var(--theme-menu-active-color);
      }
      
      &.is-active {
        background-color: var(--theme-menu-active-bg);
        color: var(--theme-menu-active-color);
      }
    }
    
    .el-sub-menu .el-menu {
      background-color: var(--el-fill-color-light);
    }
  }

  .el-input {
    .el-input__wrapper {
      background-color: var(--el-fill-color);
      border-color: var(--el-border-color);
      
      &:hover {
        border-color: var(--el-border-color-light);
      }
      
      &.is-focus {
        border-color: var(--el-color-primary);
      }
      
      .el-input__inner {
        color: var(--el-text-color-primary);
        
        &::placeholder {
          color: var(--el-text-color-placeholder);
        }
      }
    }
  }

  .el-select {
    .el-select__wrapper {
      background-color: var(--el-fill-color);
      border-color: var(--el-border-color);
      
      &:hover {
        border-color: var(--el-border-color-light);
      }
      
      &.is-focused {
        border-color: var(--el-color-primary);
      }
      
      .el-select__placeholder {
        color: var(--el-text-color-placeholder);
      }
    }
  }

  .el-button {
    &.el-button--default {
      background-color: var(--el-fill-color);
      border-color: var(--el-border-color);
      color: var(--el-text-color-primary);
      
      &:hover,
      &:focus {
        background-color: var(--el-fill-color-light);
        border-color: var(--el-border-color-light);
        color: var(--el-text-color-primary);
      }
    }
  }

  .el-dialog {
    background-color: var(--el-bg-color);
    border: 1px solid var(--el-border-color);
    
    .el-dialog__header {
      border-color: var(--el-border-color);
      
      .el-dialog__title {
        color: var(--el-text-color-primary);
      }
    }
    
    .el-dialog__body {
      color: var(--el-text-color-regular);
    }
  }

  .el-drawer {
    background-color: var(--el-bg-color);
    
    .el-drawer__header {
      color: var(--el-text-color-primary);
      border-color: var(--el-border-color);
    }
    
    .el-drawer__body {
      color: var(--el-text-color-regular);
    }
  }

  .el-dropdown-menu {
    background-color: var(--el-bg-color);
    border-color: var(--el-border-color);
    
    .el-dropdown-menu__item {
      color: var(--el-text-color-regular);
      
      &:hover {
        background-color: var(--el-fill-color);
        color: var(--el-text-color-primary);
      }
    }
  }

  .el-popover.el-popper {
    background-color: var(--el-bg-color);
    border-color: var(--el-border-color);
    color: var(--el-text-color-regular);
  }

  .el-tooltip__popper {
    background-color: var(--el-fill-color-darker);
    color: var(--el-text-color-primary);
    border-color: var(--el-border-color);
  }

  // 自定义滚动条
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--el-fill-color);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--el-fill-color-darker);
    border-radius: 4px;
    
    &:hover {
      background: var(--el-text-color-disabled);
    }
  }

  // 布局相关样式
  .layout-container {
    background-color: var(--el-bg-color-page);
    color: var(--el-text-color-regular);
  }

  .layout-header {
    background-color: var(--theme-header-bg);
    border-color: var(--theme-header-border);
    color: var(--theme-header-text);
    
    .user-info {
      color: var(--theme-header-text);
    }
    
    .breadcrumb {
      .el-breadcrumb__item {
        .el-breadcrumb__inner {
          color: var(--el-text-color-secondary);
          
          &:hover {
            color: var(--el-color-primary);
          }
        }
      }
    }
  }

  .layout-sidebar {
    background-color: var(--theme-sidebar-bg);
    border-color: var(--el-border-color);
    
    .sidebar-logo {
      background-color: var(--theme-sidebar-bg);
      color: var(--theme-sidebar-text);
      border-color: var(--el-border-color);
    }
  }

  .layout-main {
    background-color: var(--el-bg-color-page);
  }

  // 页面内容区域
  .page-container {
    background-color: var(--el-bg-color);
    color: var(--el-text-color-regular);
  }

  // 表单相关
  .el-form {
    .el-form-item__label {
      color: var(--el-text-color-regular);
    }
    
    .el-form-item__error {
      color: var(--el-color-danger);
    }
  }

  // 标签相关
  .el-tag {
    &.el-tag--info {
      background-color: var(--el-fill-color);
      border-color: var(--el-border-color);
      color: var(--el-text-color-regular);
    }
  }

  // 面包屑
  .el-breadcrumb {
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        color: var(--el-text-color-secondary);
        
        &:hover {
          color: var(--el-color-primary);
        }
      }
      
      &.is-link {
        .el-breadcrumb__inner:hover {
          color: var(--el-color-primary);
        }
      }
    }
    
    .el-breadcrumb__separator {
      color: var(--el-text-color-placeholder);
    }
  }

  // 统计卡片样式优化
  .stats-card {
    background-color: var(--el-bg-color);
    border-color: var(--el-border-color);
    
    .stats-value {
      color: var(--el-text-color-primary);
    }
    
    .stats-label {
      color: var(--el-text-color-secondary);
    }
  }

  // Loading 样式
  .el-loading-mask {
    background-color: rgba(0, 0, 0, 0.8);
  }

  // Message 样式  
  .el-message {
    background-color: var(--el-bg-color);
    border-color: var(--el-border-color);
    color: var(--el-text-color-primary);
  }

  // Notification 样式
  .el-notification {
    background-color: var(--el-bg-color);
    border-color: var(--el-border-color);
    color: var(--el-text-color-primary);
    
    .el-notification__title {
      color: var(--el-text-color-primary);
    }
    
    .el-notification__content {
      color: var(--el-text-color-regular);
    }
  }
}

// 暗色主题下的过渡动画
[data-theme="dark"] {
  * {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }
}